import React from 'react';
import { Tree } from "antd";

const MyInput = ({ value = '', onChange }) => (
    <input value={value} onChange={onChange} />
);

export default class Demo extends React.Component {
    state = {
        expandedKeys: []
    }

    onExpand = (expandedKeys) => {
        this.setState({expandedKeys})
    }

    onSelect = (selectedKeys) => {
        const {expandedKeys} = this.state;
        const key = selectedKeys[0];

        if (expandedKeys.includes(key)) {
            this.setState({
                expandedKeys: expandedKeys.filter(k => k !== key)
            })
        } else {
            this.setState({expandedKeys: [...expandedKeys, key]})
        }
    }

    render() {
        return (
            <Tree
                expandedKeys={this.state.expandedKeys}
                selectedKeys={[]}    
                onExpand={this.onExpand}
                onSelect={this.onSelect}
            >
                <Tree.TreeNode title="parent 1" key="0-0">
                    <Tree.TreeNode title="leaf" key="0-0-0" />
                    <Tree.TreeNode title="leaf" key="0-0-1" />
                </Tree.TreeNode>
            </Tree>
        );
    }
}